<script lang="ts" setup>
import HomeHeader from '@/components/home/HomeHeader.vue'
import HomeDetail from '@/components/home/HomeDetail.vue'
import { Api } from "@/apis"
import { nextTick, watch, ref, computed } from "vue"
import { homeStoriesStore } from "../../store";
import { HomeDeatilType, WeatherType } from "@/typing";
import { storeToRefs } from 'pinia'
import { fmImageArr } from "@/utils/imgSrcArr";
import { getPrevDate } from "@/utils/data-tools";
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

const store = homeStoriesStore();
const { toggleDate } = storeToRefs(store);

render(toggleDate.value);

const homeView = ref<any>(null);

let homeStories = ref<Array<HomeDeatilType>>();
let TwoStories = ref<Array<HomeDeatilType>>();
let ThereStories = ref<Array<HomeDeatilType>>();
let FourStories = ref<Array<HomeDeatilType>>();
let FiveStories = ref<Array<HomeDeatilType>>();
let weather = ref<WeatherType>();
let scorll = ref<number>(0);

let isRadio = ref<boolean>(true);
let discTimer = 0;
let discImageIndex = ref<number>(0);

if (isRadio.value) {
  discAnimation();
}

// 监听日期渲染
watch(() => toggleDate.value, (newValue) => {
  render(newValue);
  updateSwiper(); 
})

updateSwiper();

// 重新渲染列表
async function render(date: string) {
  let { data } = await Api.getDateList(date);
  homeStories.value = data.data.content_list;
  weather.value = data.data.weather;
  await nextTick()
}

async function getNextData(date: string) {
  let { data } = await Api.getDateList(date);
  return data.data.content_list;
}

function updateSwiper() {
  getNextData(getPrevDate(toggleDate.value, 1)).then((result) => { TwoStories.value = result; });
  getNextData(getPrevDate(toggleDate.value, 2)).then((result) => { ThereStories.value = result; });
  getNextData(getPrevDate(toggleDate.value, 3)).then((result) => { FourStories.value = result; });
  getNextData(getPrevDate(toggleDate.value, 4)).then((result) => { FiveStories.value = result; });
}

function getRadioTop() {
  if (homeStories.value) {
    let list = homeStories.value || [];
    let item = list[list?.length - 1];
    return `ONE电台 - ${item.author.user_name} :  ${item.title}`
  }
}

function scrollhandle() {
  scorll.value = Number(homeView.value.scrollTop);
}

function closeRadioTop() {
  isRadio.value = false;
  clearInterval(discTimer);
}
// 切图动画
function discAnimation() {
  discTimer = setInterval(() => {
    discImageIndex.value = (discImageIndex.value + 1) % fmImageArr.length;
  }, 80);
}

const headColor = computed(() => {
  let o = (scorll.value / 1500);
  o = o >= 0.6 ? 0.6 : 0.8 - o;
  return `rgba(0,0,0,${o})`;
})

</script>


<template>
  <div class="home h-screen overflow-auto " ref="homeView" @scroll.passive="scrollhandle">
    <HomeHeader :weather="weather" :scorll="scorll" />

    <div class="w-screen h-20 px-5 absolute flex items-center z-20" v-show="isRadio"
      :style="{ backgroundColor: headColor }">

      <div class="bg-radio w-12 h-10" :style="{ backgroundImage: `url(${fmImageArr[discImageIndex]})` }"></div>
      <van-notice-bar scrollable :text="getRadioTop()" speed="40" background="transparent"
        class="text-gray-50 w-10/12" />
      <img class="w-8 h-8 absolute right-5 " src="@/assets/share/close_gray.png" alt="img" @click="closeRadioTop" />
    </div>

    <swiper class="swiper relative">
      <swiper-slide>
        <HomeDetail :homeStories="homeStories || []" />
      </swiper-slide>
      <swiper-slide>
        <HomeDetail :homeStories="TwoStories || []" />
      </swiper-slide>
      <swiper-slide>
        <HomeDetail :homeStories="ThereStories || []" />
      </swiper-slide>
      <swiper-slide>
        <HomeDetail :homeStories="FourStories || []" />
      </swiper-slide>
      <swiper-slide>
        <HomeDetail :homeStories="FiveStories || []" />
      </swiper-slide>
    </swiper>

    <router-view v-slot="{ Component, route }">
      <transition name="scroll-router">
        <component :is="Component" :key="route.path" />
      </transition>
    </router-view>
  </div>
</template>

<style>
.bg-radio {
  background-size: 100% 100%;
}

.scroll-router-enter-from,
.scroll-router-leave-to {
  transform: translateY(-100%);
}

.scroll-router-enter-active,
.scroll-router-leave-active {
  transition: all 0.4s linear;
}

.scroll-router-enter-to.home,
.scroll-router-leave-from.home {
  transform: translateY(0);
}
</style>